<template>
  <div class="w-full flex justify-end container mx-auto ">
    <ul class="flex text-[rgb(240,249,255)]  justify-end ">
      <li class="p-4 hover:backdrop-blur-sm hover:bg-white/10 transition-all duration-500" v-for="(item, index) in isShow"
        :key="item.name">
        <router-link :to="item.path" active-class="active">{{ item.label }}</router-link>
      </li>
    </ul>
    <!-- 个人信息 -->
    <div class="flex justify-center items-center outline-0  " v-if="userStore.token">
      <el-dropdown class="outline-0">
        <span class="el-dropdown-link text-[rgb(240,249,255)] flex justify-center items-center hover:outline-0 ">
          <div class="block pr-2">
            <el-avatar :size="25" :src="user.avatar" />
          </div>
          {{ user.username }}
          <el-icon>
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus" class=" text-[text-[rgb(240,249,255)]]" @click="logout">退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,reactive } from 'vue'
import { useRouter } from 'vue-router'
import { get_token } from '@/utils/token'
import { useUserStore } from '../../stores/userStore';
import { ElIcon } from 'element-plus';
const token = get_token()
const router = useRouter()
const tabs = ref(router.options.routes)
const isShow = ref(tabs.value.filter(item => item.meta.isShow))
const userStore = useUserStore()
// const username = ref('')
// const avatar = ref('')
const logout = () => {
  userStore.userLogout()
  router.push('/login')
  ElMessage({
    message: '退出登录成功',
    type: 'warning',
    duration: 1000
  })
}
const user = reactive({
  username:'',
  avatar:'',
  token:''
})
onMounted(() => {
  if (token) {
    isShow.value = isShow.value.slice(0, 3)
  }
  const res  = JSON.parse(localStorage.getItem('user'))
  console.log('res',res)
  user.username = res.username
  user.avatar = res.avatar
  // console.log(user);
})
</script>

<style lang="scss" scoped>
.active {
  color: #f1c40f;
}

.el-dropdown {
  --el-dropdown-menuItem-hover-fill: transparent !important;
}
</style>